<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="确认订单" />
      <scroll-view scroll-y class="scroll-view-content">
        <!-- 商品卡片 -->
        <view class="product-card">
          <image class="product-img" :src="eventActivityDetail.master_image" mode="aspectFill" />
          <view class="product-info">
            <view class="product-title">{{ eventActivityDetail.name }}</view>
            <view class="product-time">活动时间：{{ formatDateOnly(eventActivityDetail.competition_time) }} ～ {{
              formatDateOnly(eventActivityDetail.end_time) }}</view>
            <view class="product-time">截止时间：{{ formatTime(eventActivityDetail.deadline) }}</view>
            <view class="product-price">¥{{ eventActivityDetail.price }}</view>
          </view>
        </view>

        <!-- 订单明细 -->
        <view class="section-title">订单明细</view>
        <view class="order-detail-card">
          <view class="order-row">
            <view>商品总价</view>
            <view>¥{{ eventActivityDetail.price }}</view>
          </view>
          <view class="order-row total">
            <view>合计</view>
            <view>¥{{ eventActivityDetail.price }}</view>
          </view>
        </view>

        <!-- 支付方式 -->
        <view class="section-title">支付方式</view>
        <view class="pay-method-card">
          <view class="pay-method">
            <view class="pay-icon-box">
              <image class="pay-icon" :src="imgUrl + 'wechat@2x.png'" />
            </view>
            <view class="pay-label">微信支付</view>
            <view class="pay-check">
              <view class="checked"></view>
            </view>
          </view>
        </view>


      </scroll-view>
      <!-- 占位防止底部被遮挡 -->
      <view style="height: 100rpx;"></view>
      <!-- 底部按钮 -->
      <view class="footer-bar">
        <view class="footer-left">
          <text>总计：</text>
          <text class="footer-price">¥{{ eventActivityDetail.price || '0.00' }}</text>
        </view>
        <button class="pay-btn" @click="payNow">立即支付</button>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  import { formatTime, formatDateOnly } from '@/utils/dateUtils.js'
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  import { useRequest } from '@/api';
  const { API_ACT_DETAIL_POST, API_ACT_CREATE_POST, API_ACT_PAY_POST } = useRequest()
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const eventActivityDetail = ref({})
  const mainId = ref('');//活动id
  const payId = ref('');//订单id
  onShow(() => {
    const pages = getCurrentPages(); // 获取当前页面栈
    const currentPage = pages[pages.length - 1]; // 获取当前页面
    console.log('currentPage', currentPage);

    const options = currentPage.options; // 获取当前页面的参数
    console.log('options', options);

    const { id } = options;
    mainId.value = '';
    mainId.value = id;
    console.log('id++++++++', id);
    getEventActivityDetail(id);
  })
  const getEventActivityDetail = async (id) => {
    let params = {
      id: id,
      page: 1,
      page_size: 10
    }
    eventActivityDetail.value = {}
    try {

      const res = await API_ACT_DETAIL_POST(params)

      if (res.code === 1) {
        eventActivityDetail.value = res.data;
        getActCreate(mainId.value)
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const getActCreate = async (id) => {
    let params = {
      id,
      page: 1,
      page_size: 10
    }
    payId.value = '';
    try {

      const res = await API_ACT_CREATE_POST(params)
      console.log('getActCreate', res)

      if (res.code === 1) {
        payId.value = res.data.id;
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
  const payNow = () => {
    console.log('payNow', payId.value);

    if (!payId.value) {
      uni.showToast({ title: '订单创建失败，请重试', icon: 'none' });
      return;
    }

    // 微信支付
    uni.showLoading({ title: '正在发起支付...' });

    // 实际的微信支付代码应该类似这样：
    // uni.requestPayment({
    //   provider: 'wxpay',
    //   orderInfo: payId.value,
    //   success: (res) => {
    //     console.log('支付成功', res);
    //     uni.showToast({ title: '支付成功', icon: 'success' });
    //     // 跳转到支付成功页面
    //     uni.navigateTo({ url: '/pages/payment/success' });
    //   },
    //   fail: (err) => {
    //     console.log('支付失败', err);
    //     uni.showToast({ title: '支付失败', icon: 'none' });
    //   }
    // });
    getActPay();//调用支付接口
  }
  const getActPay = async () => {
    let params = {
      id: payId.value,
      pay_type: 'wechat'
    }
    try {

      const res = await API_ACT_PAY_POST(params)
      console.log('getActPay', res)

      if (res.code === 1) {
        uni.showToast({ title: '支付成功', icon: 'success' });
        uni.navigateBack();
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>
</style>